<template>
	<view class='coupon'>
		<sidebar></sidebar>
		<view class='content'>
			<u-sticky bgColor="#fff">
				<u-tabs :list="list" lineColor='#f8e801' @click="changeStatus"></u-tabs>
			</u-sticky>
			<view class="list" v-if="dataLists.length>0">
				<view class='couponOne' v-for="(item,index) in dataLists" :key='index'>
					<view class="amount dFlex jStart_aCenter">
						<view class='cpIcon imgPublic'>
							<image src="../static/images/coupon.png" mode="widthFix"></image>
						</view>
						<text>{{$t('car.save')}} {{item.money}} SAR</text>
					</view>
					<view class='cp_content'>
						<view class='cp_kind'>{{$t('account.full')}}{{item.condition}}{{$t('account.reduce')}}{{item.money}}{{$t('account.coupon')}}</view>
						<navigator url="/pages/shopList" class='btns dFlex jEnd_aCenter' v-if="item.status==0">
							<u-button type="primary" style="color:#000;background-color: #f8e801;border:none;" size='small' :text="$t('car.use')"></u-button>
						</navigator>
						<view v-if="item.status==1" style="margin-top: 10px;"><text>{{$t('coupon.list_ysy')}} {{item.use_time}} </text></view>
						<view v-if="item.status==2" style="margin-top: 10px;"><text>{{$t('coupon.list_ygq')}} {{item.use_end_time}} </text></view>
					</view>
					
				</view>
			</view>
			<u-empty v-else :text='$t("coupon.empty")' mode="data" >
			</u-empty>
		</view>
	</view>
</template>

<script>
	import sidebar from '@/components/sidebar.vue'
	export default {
		components: {
			sidebar
		},
		data() {
			return {
				list: [{
					name: this.$t('coupon.list_all'),
					status: 3
				}, {
					name: this.$t('coupon.list_dsy'),
					status: 0
				}, {
					name: this.$t('coupon.list_ysy'),
					status: 1
				}, {
					name: this.$t('coupon.list_ygq'),
					status: 2
				}],
				index: 0,
				dataLists: [],
				page: 1,
				loadStatus: 'loadmore',
				data_count: 0
			};
		},
		onShow() {
			uni.setNavigationBarTitle({
				title:this.$t('pages.coupon'),
			})
			this.init();
		},
		onPullDownRefresh() {
			this.dataLists =[];
			this.page = 1;
			this.init()
			
			uni.stopPullDownRefresh(); // 停止下拉刷新动画
		},
		onReachBottom() {
			this.init();
		},
		methods: {
			changeStatus(e) {
				this.index = e.index
				this.dataLists = []
				this.page = 1
				this.loadStatus = 'loadmore'
				this.init()
			},
			async init() {
				const {
					dataLists,
					page,
					loadStatus,
					count
				} = await this.$tools.loadingFun('/user/couponlist', {
					status: this.list[this.index].status
				}, this.dataLists, this.page, this.loadStatus);
				this.dataLists = dataLists;
				this.page = page;
				this.loadStatus = loadStatus;
				this.data_count = count
			},
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;

		.list {
			.couponOne {
				.cp_content {
					width: 100%;
					padding: 12px;
					box-sizing: border-box;

					.btns {
						margin-top: 10px;

						.u-button {
							width: 100px;
							background: $main;
							border-color: $main;
							color: white;
						}
					}
				}

				.amount {
					width: 100%;
					padding: 10px 12px;
					box-sizing: border-box;
					color: #38ae04;
					font-size: 13px;
					background: #eff9ec;
					font-weight: bold;

					.cpIcon {
						width: 15px;
						height: 15px;
						margin-right: 10px;
					}
				}

				width:100%;
				margin-bottom:12px;
				border-radius: 10px;
				background:white;
				overflow: hidden;
				border:2px solid #e2e5f1;
			}

			width: 100%;
			padding:0 12px 12px;
			box-sizing:border-box;
			margin-top: 12px;
		}

		::v-deep.uni-scroll-view-content {
			display: flex;
			justify-content: center;
		}
	}
</style>